/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-11-09 16:34:03
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-11-10 16:52:01
 * @FilePath: /three-react/src/pages/CurveGeometry/Line1.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useEffect, useRef } from "react"
import createRender from '@/createRender';
import * as THREE from 'three';

const state = {}
export default function Page() {

  const container = useRef(null);
  useEffect(() => {
    if (!state.isMounted) {
      createRender(container)(render);
      state.isMounted = true;
    }
  }, [])



  function render(scene) {
    const geometry = new THREE.BufferGeometry();

    const vertices = new Float32Array([
      0, 0, 0, //顶点1坐标
      50, 0, 0, //顶点2坐标
      0, 25, 0, //顶点3坐标
    ])
    geometry.attributes.position = new THREE.BufferAttribute(vertices, 3);

    const colors = new Float32Array([
      1, 0, 0, 
      0, 1, 0, 
      0, 0, 1, 
    ])

    geometry.attributes.color = new THREE.BufferAttribute(colors, 3)

    const material = new THREE.PointsMaterial({
      // color: 0x00ffff,
      size: 20.0, //点对象像素尺寸
      vertexColors:true,//默认false，设置为true表示使用顶点颜色渲染
    })
    // const mesh = new THREE.Mesh(geometry, material);
    // scene.add(mesh);

    const points = new THREE.Points(geometry, material);
    const line = new THREE.Line(geometry, new THREE.LineBasicMaterial({
      vertexColors:true,//默认false，设置为true表示使用顶点颜色渲染
      linewidth: 10
    }))

    const mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
      vertexColors:true,
      side: THREE.DoubleSide
    }))
    scene.add(mesh)
    scene.add(line)
    scene.add(points);
  }

  return (
    <div id="container" className="full container" ref={container}></div>
  )
}